<template>
	<view class="page">
		<view class="content">
			<view class="title">绑定手机号码</view>
			
			<view class="input-container">
				<input class="input" type="number" placeholder="请输入要绑定的手机号码" v-model="phone" maxlength="11" />
				<view class="divider"></view>
				
				<view class="verify-container">
					<input class="input" type="number" placeholder="请输入短信验证码" v-model="code" maxlength="6" />
					<button class="verify-btn" :disabled="cooldown > 0" @tap="getCode">
						{{ cooldown > 0 ? `${cooldown}s` : '获取验证码' }}
					</button>
				</view>
			</view>
			
			<button class="login-btn" :disabled="!phone || !code" @tap="bindPhone">登 录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');
const code = ref('');
const cooldown = ref(0);

const getCode = () => {
	if (cooldown.value > 0 || !phone.value || phone.value.length !== 11) return;
	
	// 发送验证码请求
	uni.showLoading({ title: '发送中...' });
	
	// 模拟发送验证码
	setTimeout(() => {
		uni.hideLoading();
		uni.showToast({ title: '验证码已发送', icon: 'none' });
		
		// 开始倒计时
		cooldown.value = 60;
		const timer = setInterval(() => {
			cooldown.value--;
			if (cooldown.value <= 0) {
				clearInterval(timer);
			}
		}, 1000);
	}, 1000);
};

const bindPhone = () => {
	if (!phone.value || phone.value.length !== 11 || !code.value || code.value.length !== 6) {
		uni.showToast({ title: '请输入正确的手机号和验证码', icon: 'none' });
		return;
	}
	
	// 绑定手机号请求
	uni.showLoading({ title: '绑定中...' });
	
	// 模拟绑定
	setTimeout(() => {
		uni.hideLoading();
		uni.showToast({ title: '绑定成功', icon: 'success' });
		
		// 返回上一页
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	}, 1000);
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #fff;
	padding: 20px;
}

.content {
	display: flex;
	flex-direction: column;
	padding: 40px 20px;
}

.title {
	font-size: 24px;
	font-weight: bold;
	color: #333;
	margin-bottom: 50px;
}

.input-container {
	width: 100%;
	margin-bottom: 50px;
}

.input {
	width: 100%;
	height: 50px;
	font-size: 16px;
	color: #333;
	padding: 0 5px;
}

.divider {
	height: 1px;
	background-color: #f0f0f0;
	margin: 20px 0;
}

.verify-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.verify-btn {
	width: 120px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #FF5722;
	background-color: transparent;
	border: none;
	text-align: center;
}

.login-btn {
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: #FFCBC0;
	color: #fff;
	font-size: 16px;
	border-radius: 4px;
	border: none;
}

.login-btn[disabled] {
	background-color: #FFCBC0;
	opacity: 0.6;
}
</style>
